<template>
  <div class="resume-analysis-container">
    <a-card class="analysis-card" :bordered="false" style="overflow-y: auto; max-height: 95vh">
      <div class="analysis-header">
        <a-button type="text" @click="goBack" style="margin-right: 16px">
          <template #icon><arrow-left-outlined /></template>
          返回
        </a-button>
        <h2>简历分析报告</h2>
        <div v-if="analysisResult" class="total-score">综合评分: {{ totalScore }}/100</div>
      </div>
      <div v-if="loading" class="loading-container">
        <a-spin size="large" tip="正在加载分析报告..." />
      </div>

      <div v-else-if="analysisResult" class="analysis-content">
        <!-- 雷达图 -->
        <div class="radar-chart-container">
          <RadarChart
            :dimensions="dimensions"
            :scores="scores"
            :weight-config-reason="weightConfigReason"
          />
        </div>

        <!-- 维度评分 -->
        <div class="dimension-details">
          <a-tabs v-model:activeKey="activeTab">
            <a-tab-pane key="1" tab="维度评分">
              <DimensionScores
                :dimensions="dimensions"
                :scores="scores"
                :reasons="dimensions.map((d) => d.reason)"
              />
            </a-tab-pane>

            <!-- 总结评价 -->
            <a-tab-pane key="2" tab="总结评价">
              <SummaryEvaluation
                :strengths="strengths"
                :weaknesses="weaknesses"
                :suggestions="suggestions"
                :risks="risks"
              />
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
      <div v-else class="empty-container">
        <a-empty description="暂无分析数据" />
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import RadarChart from '@/components/RadarChart.vue'
import DimensionScores from '@/components/DimensionScores.vue'
import SummaryEvaluation from '@/components/SummaryEvaluation.vue'
import { useRoute, useRouter } from 'vue-router'
import { getResumeAnalyzeResultUsingGet } from '@/api/resumeController'
import { message } from 'ant-design-vue'

const route = useRoute()
const router = useRouter()
const activeTab = ref('1')
const totalScore = ref(0)
const resumeId = route.query.id
const loading = ref(true)
const analysisResult = ref(null)

const goBack = () => {
  router.go(-1)
}

const weightConfigReason = ref('')
//评估维度
const dimensions = ref([])
//分数
const scores = ref([])
//优势
const strengths = ref([])
//短板与建议
const weaknesses = ref([])
//潜在风险
const risks = ref([])
//简历修改建议
const suggestions = ref([])

const mapApiDataToState = (data) => {
  weightConfigReason.value = data.weightConfigReason
  totalScore.value = data.totalScore

  dimensions.value = [
    {
      name: data.educationBackgroundName,
      weight: data.educationBackgroundMaxScore,
      reason: data.educationBackgroundReason,
    },
    { name: data.skillMatchName, weight: data.skillMatchMaxScore, reason: data.skillMatchReason },
    {
      name: data.projectExperienceName,
      weight: data.projectExperienceMaxScore,
      reason: data.projectExperienceReason,
    },
    {
      name: data.positionMatchName,
      weight: data.positionMatchMaxScore,
      reason: data.positionMatchReason,
    },
    {
      name: data.potentialGrowthName,
      weight: data.potentialGrowthMaxScore,
      reason: data.potentialGrowthReason,
    },
    {
      name: data.teamLeadershipName,
      weight: data.teamLeadershipMaxScore,
      reason: data.teamLeadershipReason,
    },
    {
      name: data.certificatesName,
      weight: data.certificatesMaxScore,
      reason: data.certificatesReason,
    },
    {
      name: data.communicationName,
      weight: data.communicationMaxScore,
      reason: data.communicationReason,
    },
  ]

  scores.value = [
    data.educationBackgroundScore,
    data.skillMatchScore,
    data.projectExperienceScore,
    data.positionMatchScore,
    data.potentialGrowthScore,
    data.teamLeadershipScore,
    data.certificatesScore,
    data.communicationScore,
  ]

  //优势
  strengths.value = data.advantages.split('\n').filter((item) => item.trim())
  //短板
  weaknesses.value = data.disadvantages.split('\n').filter((item) => item.trim())
  //潜在风险
  risks.value = data.risks.split('\n').filter((item) => item.trim())
  //建议
  suggestions.value = data.improvementSuggestions.split('\n').filter((item) => item.trim())
}

onMounted(async () => {
  // 加载
  loading.value = true
  if (!resumeId) {
    message.error('缺少简历ID')
    loading.value = false
    return
  }
  try {
    const res = await getResumeAnalyzeResultUsingGet({
      resumeId: resumeId as any,
    })
    if (res.code === 0 && res.data) {
      analysisResult.value = res.data as any
      mapApiDataToState(res.data)
    } else {
      // Let it be empty
    }
  } catch (err) {
    message.error('获取简历分析结果失败')
    console.error('获取简历分析结果失败:', err)
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.resume-analysis-container {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e6eaf1 100%);
  min-height: 100vh;
}

.analysis-card {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(24, 144, 255, 0.08);
  background: rgba(255, 255, 255, 0.96);
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.analysis-header h2 {
  font-size: 1.5rem;
  color: #1890ff;
  margin: 0;
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.total-score {
  font-size: 1.2rem;
  font-weight: bold;
  color: #52c41a;
}

.analysis-content {
  display: flex;
  gap: 32px;
}

.radar-chart-container {
  flex: 1;
  min-width: 400px;
}

.reason-text {
  width: 80%;
  margin: 20px auto;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  color: #666;
}

.dimension-details {
  flex: 1;
  min-width: 400px;
}

@media (max-width: 992px) {
  .analysis-content {
    flex-direction: column;
  }
}
</style>
